<template>
  <div>
    <div>

        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <h1>{{ formInfo.formName }}</h1>
          </div>
          <!-- 题目列表 -->
          <div v-for="(item, index) in questionArray" :key="(item, index)">
            <el-card class="box-card" shadow="hover">
              <!-- 填空题 -->
              <div v-if="item.questionType == 0">
                <span v-if="item.must" style="color: red">*&nbsp;</span>
                <span style="font-weight: bold"
                  >第{{ index + 1 }}题&nbsp;|&nbsp;{{ item.questionName }}</span
                >&nbsp;
                <el-tag
                  type="info"
                  v-show="item.must && answerArray[index].answer == null"
                  >未完成
                </el-tag>
                <br /><br />
                <el-input
                  v-model="answerArray[index].answer"
                  style="width: 65%"
                  type="textarea"
                  disabled
                  placeholder="请输入内容"
                ></el-input
                >&nbsp;
                <br />
              </div>

              <!-- 单选题 -->
              <div v-if="item.questionType == 1">
                <span v-if="item.must" style="color: red">*&nbsp;</span>
                <span style="font-weight: bold"
                  >第{{ index + 1 }}题&nbsp;|&nbsp;{{ item.questionName }}</span
                >&nbsp;
                <el-tag
                  type="info"
                  v-show="item.must && answerArray[index].optionId == null"
                  >未完成
                </el-tag>
                <br /><br />
                <el-radio-group v-model="answerArray[index].optionId" disabled>
                  <div
                    v-for="(item0, index0) in item.options"
                    :key="(item0, index0)"
                  >
                    <el-radio :label="item0.id"
                      >{{ item0.content }}<br /><br
                    /></el-radio>
                  </div>
                </el-radio-group>
              </div>
              <!-- 多选题 -->
              <div v-if="item.questionType == 2">
                <span v-if="item.must" style="color: red">*&nbsp;</span>
                <span style="font-weight: bold"
                  >第{{ index + 1 }}题&nbsp;|&nbsp;{{ item.questionName }}</span
                >&nbsp;
                <el-tag
                  type="info"
                  v-show="item.must && answerArray[index].optionId.length == 0"
                  >未完成
                </el-tag>
                <br /><br />

                <el-checkbox-group
                  v-model="answerArray[index].optionId"
                  :min="item.optionMin"
                  :max="item.optionMax"
                  disabled
                >
                  <el-checkbox
                    v-for="(item0, index0) in questionArray[index].options" 
                    :label="item0.id"
                    :key="(item0, index0)"
                    >{{ item0.content }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>

              <!-- 下拉框 -->
              <div v-if="item.questionType == 3">
                <span v-if="item.must" style="color: red">*&nbsp;</span>
                <span style="font-weight: bold"
                  >第{{ index + 1 }}题&nbsp;|&nbsp;{{ item.questionName }}</span
                >&nbsp;
                <el-tag
                  type="info"
                  v-show="item.must && answerArray[index].optionId == null"
                  >未完成
                </el-tag>
                <br /><br />

                <el-select
                  v-model="answerArray[index].optionId"
                  disabled
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item0, index0) in questionArray[index].options"
                    :key="(item0, index0)"
                    :label="item0.content"
                    :value="item0.id"
                  >
                  </el-option>
                </el-select>
              </div>

              <!-- 滑动条 -->
              <div v-if="item.questionType == 4">
                <span v-if="item.must" style="color: red">*&nbsp;</span>
                <span style="font-weight: bold"
                  >第{{ index + 1 }}题&nbsp;|&nbsp;{{ item.questionName }}</span
                >&nbsp;
                <el-tag
                  type="info"
                  v-show="item.must && answerArray[index].answer == null"
                  >未完成
                </el-tag>
                <br /><br />

                <el-slider
                disabled
                  :min="item.slideMin"
                  :max="item.slideMax"
                  v-model="answerArray[index].answer"
                  style="width: 40%"
                ></el-slider>
              </div>
              <!-- 日期时间选择 -->
              <div v-if="item.questionType == 5">
                <span v-if="item.must" style="color: red">*&nbsp;</span>
                <span style="font-weight: bold"
                  >第{{ index + 1 }}题&nbsp;|&nbsp;{{ item.questionName }}</span
                >&nbsp;
                <el-tag
                  type="info"
                  v-show="item.must && answerArray[index].beginAndEnd == null"
                  >未完成
                </el-tag>
                <br /><br />

                <el-date-picker
                disabled
                  v-model="answerArray[index].beginAndEnd"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                >
                </el-date-picker>
              </div>
            </el-card>
            <br />
          </div>
        </el-card>
        <br />
    </div>
  </div>
</template>

<script>
import { nanoid } from "nanoid"; //生成id的接口
import { getFormInfo } from "@/api/forms/write.js"; //获取题目信息
import { reviseBlank } from "@/api/forms/write.js"; //修改填空
import { reviseRadio } from "@/api/forms/write.js"; //修改单选
import { reviseCheckbox } from "@/api/forms/write.js"; //修改多选
import { reviseListbox } from "@/api/forms/write.js"; //修改下拉
import { reviseSlide } from "@/api/forms/write.js"; //修改滑动
import { reviseDateAndTime } from "@/api/forms/write.js"; //修改日期时间
import { submitFormAnswer } from "@/api/forms/write.js"; //提交表单

export default {
  data() {
    return {
      value: true,
      //正在填写的表单id
      formId: null,
      //当前设备的ip
      ip:process.env.BASE_IP,
      //后端传送的操作类型
      typeCode: null,
      //后端传来的填写实例id
      recordId: null,
      isPublished: false,
      isTimeOut: null,
      dialogVisible: false,
      formInfo: [], //表单信息
      questionArray: [], //所有题目数组
      answerArray: [], //答案数组
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  //页面刷新自动调用的方法,从后台获取表单题目
  created() {
    //45NwiHqqKB_cM4MuJnC0q 填空题测试
    //pYRkRGMXKxPcGvrlIjxQj 滑动条测试
    //hi4rIVfVU1V7vxPKs0Wn4 填空题测试
    //mUwhEEidMpnjlWqNy8cOy 多选题测试
    //diqPM1oXt_-xfFvCICg_p 多选题测试
    //Rpr0YpEktUcdurUq8PlQh 日期时间选择测试
    //8dLgnUbe1ETOX8wwa2yIn 全题型测试
    //var formId = this.$route.query.formId; //获取跳转参数：表单id
    this.formId = this.$route.query.formId; //获取跳转参数：表单id
    this.recordId=this.$route.query.recordId;
    this.getFormInfo(); //根据表单id查询表单内容
  },
  methods: {

    //根据表单id获取表单内容
    getFormInfo() {
      //打包数据
      var params = {
        formId:this.formId, //表单id
        ip: this.ip,
        recordId:this.recordId,
      };
      //调用接口，新建表单
      getFormInfo(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "获取表单信息成功",
            type: "success",
          });
          this.formInfo=response.form.formInfo;
          this.questionArray=response.form.questions;
          this.answerArray=response.form.answers;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //填充答案数组
    fillAnswerArray() {
      for (var i = 0; i < this.questionArray.length; i++) {
        if (JSON.stringify(this.answerArray[i])=='{}') {
          switch (this.questionArray[i].questionType) {
            case 0: //填空题
              //新增字段，必须使用set方法，动态新增
              this.$set(this.answerArray[i], "id", nanoid());
              this.$set(this.answerArray[i], "formId", this.formInfo.id);
              this.$set(this.answerArray[i], "questionId", this.questionArray[i].id);
              this.$set(this.answerArray[i], "answer", null);
              this.$set(this.answerArray[i], "createTime", null);
              this.$set(this.answerArray[i], "isSubmit", false);
              this.$set(this.answerArray[i], "flowInstId", null);
              this.$set(this.answerArray[i], "recordId", this.recordId);
              break;
            case 1: //单选题
              this.$set(this.answerArray[i], "id", nanoid());
              this.$set(this.answerArray[i], "formId", this.formInfo.id);
              this.$set(this.answerArray[i], "questionId", this.questionArray[i].id);
              this.$set(this.answerArray[i], "optionId", null);
              this.$set(this.answerArray[i], "createTime", null);
              this.$set(this.answerArray[i], "isSubmit", false);
              this.$set(this.answerArray[i], "flowInstId", null);
              this.$set(this.answerArray[i], "recordId", this.recordId);
              break;
            case 2: //多选题
              this.$set(this.answerArray[i], "id", nanoid());
              this.$set(this.answerArray[i], "formId", this.formInfo.id);
              this.$set(this.answerArray[i], "questionId", this.questionArray[i].id);
              this.$set(this.answerArray[i], "optionId", []);
              this.$set(this.answerArray[i], "createTime", null);
              this.$set(this.answerArray[i], "isSubmit", false);
              this.$set(this.answerArray[i], "flowInstId", null);
              this.$set(this.answerArray[i], "recordId", this.recordId);
              break;
            case 3: //下拉框
              this.$set(this.answerArray[i], "id", nanoid());
              this.$set(this.answerArray[i], "formId", this.formInfo.id);
              this.$set(this.answerArray[i], "questionId", this.questionArray[i].id);
              this.$set(this.answerArray[i], "optionId", null);
              this.$set(this.answerArray[i], "createTime", null);
              this.$set(this.answerArray[i], "isSubmit", false);
              this.$set(this.answerArray[i], "flowInstId", null);
              this.$set(this.answerArray[i], "recordId", this.recordId);
              break;
            case 4: //滑动条
              this.$set(this.answerArray[i], "id", nanoid());
              this.$set(this.answerArray[i], "formId", this.formInfo.id);
              this.$set(this.answerArray[i], "questionId", this.questionArray[i].id);
              this.$set(this.answerArray[i], "answer", null);
              this.$set(this.answerArray[i], "createTime", null);
              this.$set(this.answerArray[i], "isSubmit", false);
              this.$set(this.answerArray[i], "flowInstId", null);
              this.$set(this.answerArray[i], "recordId", this.recordId);
              break;
            case 5: //日期时间选择
              this.$set(this.answerArray[i], "id", nanoid());
              this.$set(this.answerArray[i], "formId", this.formInfo.id);
              this.$set(this.answerArray[i], "questionId", this.questionArray[i].id);
              this.$set(this.answerArray[i], "beginAndEnd", []);
              this.$set(this.answerArray[i], "createTime", null);
              this.$set(this.answerArray[i], "isSubmit", false);
              this.$set(this.answerArray[i], "flowInstId", null);
              this.$set(this.answerArray[i], "recordId", this.recordId);
              break;
          }
        }
      }
    },
    //生成答案数组
    createAnswerArray() {
      for (var i = 0; i < this.questionArray.length; i++) {
        switch (this.questionArray[i].questionType) {
          case 0: //填空题
            var params = {
              id: nanoid(),
              formId: this.formInfo.id,
              questionId: this.questionArray[i].id,
              answer: null,
              createTime: null,
              isSubmit: false,
              flowInstId: null,
              recordId: this.recordId,
            };
            this.answerArray.splice(i, 0, params);
            break;
          case 1: //单选题
            var params = {
              id: nanoid(),
              formId: this.formInfo.id,
              questionId: this.questionArray[i].id,
              optionId: null,
              createTime: null,
              isSubmit: false,
              flowInstId: null,
              recordId: this.recordId,
            };
            this.answerArray.splice(i, 0, params);
            break;
          case 2: //多选题
            var params = {
              id: nanoid(),
              formId: this.formInfo.id,
              questionId: this.questionArray[i].id,
              optionId: [],
              createTime: null,
              isSubmit: false,
              flowInstId: null,
              recordId: this.recordId,
            };
            this.answerArray.splice(i, 0, params);
            break;
          case 3: //下拉框
            var params = {
              id: nanoid(),
              formId: this.formInfo.id,
              questionId: this.questionArray[i].id,
              optionId: null,
              createTime: null,
              isSubmit: false,
              flowInstId: null,
              recordId: this.recordId,
            };
            this.answerArray.splice(i, 0, params);
            break;
          case 4: //滑动条
            var params = {
              id: nanoid(),
              formId: this.formInfo.id,
              questionId: this.questionArray[i].id,
              answer: null,
              createTime: null,
              isSubmit: false,
              flowInstId: null,
              recordId: this.recordId,
            };
            this.answerArray.splice(i, 0, params);
            break;
          case 5: //日期时间选择
            var params = {
              id: nanoid(),
              formId: this.formInfo.id,
              questionId: this.questionArray[i].id,
              beginAndEnd: [],
              createTime: null,
              isSubmit: false,
              flowInstId: null,
              recordId: this.recordId,
            };
            this.answerArray.splice(i, 0, params);
            break;
        }
      }
    },
    //修改填空题
    reviseBlank(i) {
      //打包数据
      var params = this.answerArray[i];
      console.log(params);
      params.createTime = this.parseTime(new Date());
      console.log(params);
      //调用接口，发送请求
      reviseBlank(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改填空题成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改单选题
    reviseRadio(i) {
      //打包数据
      var params = this.answerArray[i];
      params.createTime = this.parseTime(new Date());
      //调用接口，发送请求
      reviseRadio(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改单选题成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改多选题
    reviseCheckbox(i) {
      //打包数据
      var params = this.answerArray[i];
      params.createTime = this.parseTime(new Date());

      //调用接口，发送请求
      reviseCheckbox(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改多选题成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改下拉
    reviseListbox(i) {
      //打包数据
      var params = this.answerArray[i];
      params.createTime = this.parseTime(new Date());

      //调用接口，发送请求
      reviseListbox(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改下拉框成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改滑动
    reviseSlide(i) {
      //打包数据
      var params = this.answerArray[i];
      params.createTime = this.parseTime(new Date());

      //调用接口，发送请求
      reviseSlide(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改滑动条成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改日期时间选择
    reviseDateAndTime(i) {
      //打包数据
      var params = this.answerArray[i];
      params.createTime = this.parseTime(new Date());

      //调用接口，发送请求
      reviseDateAndTime(params)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "修改日期时间成功",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //检查必选的答案是否填写完全
    answerCheck() {
      for (var i = 0; i < this.answerArray.length; i++) {
        if (this.questionArray[i].must == true) {
          switch (this.questionArray[i].questionType) {
            case 0:
              if (this.answerArray[i].answer == null) {
                this.$message.error("请检查第" + (i + 1) + "题");
                return;
              }
              break;
            case 1:
              if (this.answerArray[i].optionId == null) {
                this.$message.error("请检查第" + (i + 1) + "题");
                return;
              }
              break;
            case 2:
              if (this.answerArray[i].optionId.length == 0) {
                this.$message.error("请检查第" + (i + 1) + "题");
                return;
              }
              break;
            case 3:
              if (this.answerArray[i].optionId == null) {
                this.$message.error("请检查第" + (i + 1) + "题");
                return;
              }
              break;
            case 4:
              if (this.answerArray[i].answer == null) {
                this.$message.error("请检查第" + (i + 1) + "题");
                return;
              }
              break;
            case 5:
              if (this.answerArray[i].beginAndEnd.length == 0) {
                this.$message.error("请检查第" + (i + 1) + "题");
                return;
              }
              break;
          }
        }
      }
      this.dialogVisible = true;
    },

    //向后端发送提交表单的请求
    submitFormAnswer() {
      //打包数据
      var params = {
        formId: this.formInfo.id,
        recordId: this.recordId,
      };
      //调用接口，保存表单
      submitFormAnswer(params)
        .then((response) => {
          this.dialogVisible = false;
          this.$message({
            message: "表单提交成功",
            type: "success",
          });
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  //数据加工
  computed: {
    aArray() {
      //答案数组
      return JSON.parse(JSON.stringify(this.answerArray));
    },
  },
  watch: {
    aArray: {
      //监听答案变动
      handler(newVal, oldVal) {
        if (oldVal.length == 0) {
          return;
        }
        for (var i = 0; i < newVal.length; i++) {
          switch (this.questionArray[i].questionType) {
            case 0: //填空题变动
              if (newVal[i].answer != oldVal[i].answer) {
                console.log("填空变了");
                this.reviseBlank(i);
                return;
              }
              break;
            case 1: //单选题变动
              if (newVal[i].optionId != oldVal[i].optionId) {
                console.log("单选变了");
                this.reviseRadio(i);
                return;
              }
              break;
            case 2: //多选题变动
              if (newVal[i].optionId.length != oldVal[i].optionId.length) {
                console.log("多选变了");
                this.reviseCheckbox(i);
                return;
              }
              break;
            case 3: //下拉框变动
              if (newVal[i].optionId != oldVal[i].optionId) {
                console.log("下拉变了");
                this.reviseListbox(i);
                return;
              }
              break;
            case 4: //滑动条变动
              if (newVal[i].answer != oldVal[i].answer) {
                this.reviseSlide(i);
                return;
              }
              break;
            case 5: //日期时间变动
              if (
                newVal[i].beginAndEnd[0] != oldVal[i].beginAndEnd[0] ||
                newVal[i].beginAndEnd[1] != oldVal[i].beginAndEnd[1]
              ) {
                console.log("日期时间变了");
                this.reviseDateAndTime(i);
                return;
              }
              break;
          }
        }
      },
      deep: true,
    },
  },
};
</script>
